<template>
  <div class="policy-container">
    <el-row>
      <el-col :span="24">
        <normal-filter :filterProps="filterProps" />
      </el-col>
    </el-row>
    <el-row v-if="$getUserInfo().sysUser.type === 1">
      <el-button type="primary" icon="el-icon-plus" @click="addContent"
        >添加客户</el-button
      >
    </el-row>
    <el-row class="table-container">
      <Table
        :columnProps="columnProps"
        :tableData="tableData"
        :showHandle="true"
        :pagination="pagination"
        :hideModifyBtn="true"
        @currentPage="goCurrent"
        @sizeChange="sizeChange"
        @delete="del"
      >
        <template slot-scope="scopes" slot="link">
          <span style="margin-left: 20px" v-if="scopes.scope.row.type !== 3">
            <el-link
              @click="modify(scopes.scope.row)"
              type="warning"
              :underline="false"
            >
              编辑
            </el-link>
          </span>
        </template>
      </Table>
    </el-row>
  </div>
</template>

<script>
import normalFilter from "@/components/NormalFilter";
import Table from "@/components/Table";
import { getList, delItem } from "@/api/customer";
import { pagination, page, CUSTOMERTYPE } from "@/utils/enumConfig";
import { Message } from "element-ui";

export default {
  name: "Customer",
  components: {
    normalFilter,
    Table,
  },
  data() {
    const filterProps = {
      filterItems: [
        {
          type: "input",
          id: "name",
          title: "姓名",
          placeholder: "请输入",
        },
        // {
        //   type: "select",
        //   id: "type",
        //   title: "客户类型",
        //   placeholder: "请选择",
        //   options: [
        //     {
        //       title: "快成交客户",
        //       key: "A",
        //       value: "A",
        //     },
        //     {
        //       title: "高意向客户",
        //       key: "B",
        //       value: "B",
        //     },
        //     {
        //       title: "认可接触不反感客户",
        //       key: "C",
        //       value: "C",
        //     },
        //   ],
        // },
        {
          type: "input",
          id: "phone",
          title: "手机号",
          placeholder: "请输入",
        },
        {
          type: "date",
          title: "创建时间",
        },
      ],
      onFilterChange: (value) => {
        this.filterParam = value;
        this.getList({
          ...value,
          ...page,
        });
      },
    };
    const columnProps = [
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "客户来源",
        dataIndex: "source",
        key: "source",
      },
      {
        title: "所在地区",
        dataIndex: "area",
        key: "area",
      },
      {
        title: "手机号",
        dataIndex: "phone",
        key: "phone",
      },
      {
        title: "身份证",
        dataIndex: "idcardNo",
        key: "idcardNo",
      },
      {
        title: "理财经理",
        dataIndex: "financeManager",
        key: "financeManager",
      },
      {
        title: "是否添加企微",
        dataIndex: "addWxWork",
        key: "addWxWork",
        render: (record) => {
          return `<span>${!record.addWxWork?'否':'是'}</span>`;
        },
      },
      {
        title: "分配时间",
        dataIndex: "distributeTime",
        key: "distributeTime",
      },
    ];
    return {
      filterProps,
      columnProps,
      list: [],
      tableData: [],
      pagination: this.$_.cloneDeep(pagination),
      filterParam: null,
      popVisibleArr:[]
    };
  },
  async created() {
    let { pageIndex } = this.pagination;
    let param = {
      current: pageIndex,
    };
    this.getList(param);
  },
  methods: {
    addContent() {
      this.$router.push("/customer/add");
    },
    goCurrent(currentIndex) {
      console.log(currentIndex);
      let { pageSize, pageIndex } = this.pagination;
      let param = {
        ...this.filterParam,
        current: currentIndex,
        size: pageSize
      };

      this.getList(param);
    },
    modify({ id }) {
      this.$router.push({ path: `/customer/update/${id}` });
    },
    async del({ id }) {
      let res = await delItem({ id });
      if (res.code === 1) {
        let { pageIndex } = this.pagination;
        this.getList({
          ...this.filterParam,
          current: 1,
        });
      }
    },
    async getList(param) {
      let { records, size, total, current } = await getList(param),
        page = this.pagination;
      this.pagination = {
        ...page,
        totalElements: total,
        pageIndex: current,
      };
      this.tableData = records;
    },
    /**
     *设置删除框的显隐
     */
    setPopVisible(rowIndex) {
      let _this = this;
      _this.popVisibleArr.forEach((item, index) => {
        index == rowIndex
          ? _this.$set(
              _this.popVisibleArr,
              rowIndex,
              !_this.popVisibleArr[rowIndex]
            )
          : _this.$set(_this.popVisibleArr, index, false);
      });
    },
    sizeChange(size) {
      let param = {
        ...this.filterParam,
        current: 1,
        size
      };
      this.$set(this.pagination, "pageSize", size);
      this.getList(param);
    },
  },
  watch: {
    list(newArr, oldArr) {
      newArr.forEach((item) => [this.popVisibleArr.push(false)]);
    },
  }
};
</script>

<style lang="scss" scoped>
.policy-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .table-container {
    margin-top: 20px;
  }
}
</style>
